<template>
  <div class="dashboard-container">
    <!-- 顶部区域 -->
    <el-row :gutter="20" class="top-section">
      <el-col :span="16">
        <!-- 净资产卡片 -->
        <el-card class="box-card net-assets-card">
          <template #header>
            <div class="card-header">
              <span>净资产</span>
              <!-- 可能有刷新或其他按钮 -->
            </div>
          </template>
          <div class="net-assets-content">
            <div class="amount">0.00</div>
            <div class="details">
              <span>总资产 0.00</span> | <span>总负债 0.00</span>
            </div>
          </div>
           <!-- 背景图 -->
           <!-- <img src="@/assets/dashboard-bg.png" alt="background" class="bg-image" /> -->
        </el-card>

        <!-- 本月每日收支图表 -->
        <el-card class="box-card daily-trend-card">
           <template #header>
            <div class="card-header">
              <span>本月每日收支</span>
               <div class="legend">
                 <span class="income">收入 0.00</span>
                 <span class="expense">支出 0.00</span>
               </div>
            </div>
          </template>
          <div class="chart-placeholder">
            <!-- 这里将来放置 ECharts 图表 -->
            图表区域
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <!-- 快捷摘要卡片 -->
        <el-card class="box-card quick-summary-card">
           <div class="summary-item">
             <div class="label">今天 <span class="date">2025年05月13日</span></div>
             <div class="values">总收入 <span class="income-val">0.00</span></div>
             <div class="values">总支出 <span class="expense-val">0.00</span></div>
           </div>
           <el-divider />
           <div class="summary-item">
             <div class="label">本月 <span class="date">05月01日-05月31日</span></div>
             <div class="values">总收入 <span class="income-val">0.00</span></div>
             <div class="values">总支出 <span class="expense-val">0.00</span></div>
           </div>
           <el-divider />
            <div class="summary-item">
             <div class="label">本年 <span class="date">2025年</span></div>
             <div class="values">总收入 <span class="income-val">0.00</span></div>
             <div class="values">总支出 <span class="expense-val">0.00</span></div>
           </div>
        </el-card>

        <!-- 本月各分类支出排行 -->
        <el-card class="box-card expense-ranking-card">
          <template #header>
            <div class="card-header">
              <span>本月各分类支出排行</span>
              <span class="extra">记账笔数 0 总支出 0.00</span>
            </div>
          </template>
          <ul class="ranking-list">
            <li><span>1</span> <span>食品酒水</span> <span>0.00</span></li>
            <li><span>2</span> <span>居家生活</span> <span>0.00</span></li>
            <li><span>3</span> <span>交通通讯</span> <span>0.00</span></li>
            <!-- 更多排行项 -->
          </ul>
        </el-card>
      </el-col>
    </el-row>

    <!-- 底部区域 -->
    <el-row :gutter="20" class="bottom-section">
       <el-col :span="16">
         <!-- 本月分类收入 -->
         <el-card class="box-card income-category-card">
           <template #header>
            <div class="card-header">
              <span>本月分类收入</span>
            </div>
          </template>
           <div class="income-item">
             <span>职业收入</span>
             <span class="subtext">收入类别</span>
             <span class="values">收入笔数 0</span>
             <span class="values amount">总收入 0.00</span>
           </div>
           <el-divider />
            <div class="income-item">
             <span>人情收礼</span>
              <span class="subtext">收入类别</span>
             <span class="values">收入笔数 0</span>
             <span class="values amount">总收入 0.00</span>
           </div>
           <el-divider />
            <div class="income-item">
             <span>其他收入</span>
              <span class="subtext">收入类别</span>
             <span class="values">收入笔数 0</span>
             <span class="values amount">总收入 0.00</span>
           </div>
         </el-card>
       </el-col>
       <el-col :span="8">
         <!-- 本月各成员收支 -->
         <el-card class="box-card member-income-card">
           <template #header>
            <div class="card-header">
              <span>本月各成员收支</span>
            </div>
          </template>
           <ul class="member-list">
             <li>
               <el-avatar size="small" src="avatar_placeholder.png" />
               <span>董大礼</span>
               <span class="subtext">成员</span>
               <div class="member-values">
                  <div>总收入 <span class="income-val">0.00</span></div>
                  <div>总支出 <span class="expense-val">0.00</span></div>
               </div>
             </li>
              <li>
               <el-avatar size="small" icon="el-icon-user" />
               <span>朋友</span>
                <span class="subtext">成员</span>
                <div class="member-values">
                  <div>总收入 <span class="income-val">0.00</span></div>
                  <div>总支出 <span class="expense-val">0.00</span></div>
               </div>
             </li>
              <li>
               <el-avatar size="small" icon="el-icon-user-solid" />
               <span>本人</span>
                <span class="subtext">成员</span>
                <div class="member-values">
                  <div>总收入 <span class="income-val">0.00</span></div>
                  <div>总支出 <span class="expense-val">0.00</span></div>
               </div>
             </li>
           </ul>
         </el-card>
       </el-col>
    </el-row>

  </div>
</template>

<script setup lang="ts">
// 导入所需组件或库
// import { ref, onMounted } from 'vue';
// import * as echarts from 'echarts'; // 如果使用 ECharts

// 定义响应式数据
// const chartInstance = ref(null);

// 生命周期函数
// onMounted(() => {
//   initChart();
// });

// 方法
// const initChart = () => {
//   // 初始化图表逻辑
// };

</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f0f2f5; /* 背景色接近图片 */
}

.box-card {
  margin-bottom: 20px;
}

/* 可以根据需要添加更详细的样式 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.net-assets-card .net-assets-content {
  position: relative;
  z-index: 1;
  color: white; /* 根据背景图调整 */
}
.net-assets-card .bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover ensures the image covers the card area */
    z-index: 0;
    opacity: 0.8; /* Optional: adjust opacity */
    border-radius: 4px; /* Match card border radius */
}

.net-assets-card .amount {
  font-size: 28px;
  font-weight: bold;
}
.net-assets-card .details {
    margin-top: 5px;
    font-size: 14px;
}

.daily-trend-card .legend {
    font-size: 12px;
}
.daily-trend-card .legend .income {
    margin-right: 10px;
    color: #ff4d4f; /* 示例颜色 */
}
.daily-trend-card .legend .expense {
     color: #1890ff; /* 示例颜色 */
}
.daily-trend-card .chart-placeholder {
  height: 300px; /* 示例高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
}

.quick-summary-card .summary-item {
    font-size: 14px;
    margin-bottom: 10px;
}
.quick-summary-card .summary-item .label {
    color: #333;
    margin-bottom: 5px;
}
.quick-summary-card .summary-item .date {
    color: #999;
    font-size: 12px;
    margin-left: 5px;
}
.quick-summary-card .summary-item .values {
    color: #666;
}
.quick-summary-card .summary-item .income-val {
    color: #ff4d4f; /* 示例颜色 */
}
.quick-summary-card .summary-item .expense-val {
    color: #1890ff; /* 示例颜色 */
}


.expense-ranking-card .extra {
    font-size: 12px;
    color: #999;
}
.expense-ranking-card .ranking-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.expense-ranking-card .ranking-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
}
.expense-ranking-card .ranking-list li span:first-child {
    width: 20px;
    text-align: center;
    margin-right: 10px;
}

.income-category-card .income-item {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 15px;
    align-items: center;
    font-size: 14px;
    padding: 10px 0;
}
.income-category-card .income-item .subtext {
    font-size: 12px;
    color: #999;
}
.income-category-card .income-item .values {
    font-size: 13px;
    color: #666;
}
.income-category-card .income-item .amount {
   font-weight: bold;
   color: #ff4d4f; /* 示例颜色 */
}


.member-income-card .member-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.member-income-card .member-list li {
    display: flex;
    align-items: center;
    padding: 10px 0;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
}
.member-income-card .member-list li:last-child {
    border-bottom: none;
}
.member-income-card .member-list li .el-avatar {
    margin-right: 10px;
}
.member-income-card .member-list li .subtext {
    font-size: 12px;
    color: #999;
    margin-left: 5px;
}
.member-income-card .member-list li .member-values {
    margin-left: auto;
    text-align: right;
    font-size: 13px;
}
.member-income-card .member-list li .income-val {
    color: #ff4d4f; /* 示例颜色 */
}
.member-income-card .member-list li .expense-val {
    color: #1890ff; /* 示例颜色 */
}

.el-divider {
    margin: 10px 0;
}

/* 根据 Element Plus 调整具体样式 */

</style> 